


<template>
  <div class="main">
    <div class="rightbottom">
      <div
        class="button"
        v-if="$route.query.adFlag == 1"
        @click="dialogVisible = true"
      >
        选择商品
      </div>

      <el-upload
        style="font-size: 12px"
        :action="action + '/common/upload/file'"
        :show-file-list="false"
        :on-success="handleAvatarSuccessC"
        :before-upload="beforeAvatarUpload"
      >
        <div class="button" v-if="$route.query.adFlag == 0">上传图片</div>
      </el-upload>
      <div class="button" @click="advertisementSetProduct">保存</div>
      <div class="button" @click="$router.back()">返回</div>
    </div>

    <div class="textBox" v-if="form.adPosition == 'index_popular_store'">
      广告语: <el-input style="width: 300px" v-model="form.text"></el-input>
    </div>
    <div class="textBox" >预览:</div>
    <div v-if="$route.query.adFlag == 0">
      <img :src="form.imageUrl" alt="" />
    </div>
    <div class="listBox">
      <div class="list">
        <div class="newLisat">
          <div class="imgshop-box">
            <img :src="form.productPicture" alt="" />
          </div>
          <div class="SpecificationGood">{{ form.productName }}</div>
          <div class="WareName-goods">
            {{ form.specification }}
          </div>
          <div class="price">
            <div>
              <span class="icon-price">￥</span>
              <span class="RetailPrice">{{ form.price }}</span>
            </div>
            <div class="SalesQuantity-item">
              分销量 : {{ form.salesPoints }}
            </div>
          </div>
        </div>
        <!-- <div class="Position-replacement">
          <div class="box-position2">
            <div>移除</div>
          </div>
        </div> -->
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="50%" class="newDialog">
      <div class="DiaLogHeader">
        <div class="titlebOX">添加商品</div>
        <div class="chahao" @click="dialogVisible = false"></div>
      </div>
      <el-divider></el-divider>
      <div style="padding: 20px 40px" class="textBox">
        <div class="tableBox">
          <el-table
            :data="tableData"
            header-cell-class-name="tableHeader"
            style="width: 100%"
            height="51vh"
          >
            <el-table-column prop="date" label="商品图片/标题">
              <template slot-scope="scope">
                <div class="shopsData">
                  <img :src="scope.row.pictureOriginal" class="newImg" alt="" />
                  <div class="shopsDataBox">
                    <div class="nameBox">{{ scope.row.goodsName }}</div>
                    <div class="Model">{{ scope.row.storeName }}</div>
                    <div class="Model">
                      {{ scope.row.productColorNumber }}色
                      {{ scope.row.productYardNumber }}码
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>

            <el-table-column prop="address" label="操作" width="100">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  @click="advertisementSetProduct(scope.row.id)"
                  >确认添加</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
    
    <script>
import {
  showMyAdvertisement,
  showMyAdInfo,
  advertisementSetProduct,
} from "@/api/seller/adentry.js";
import imgPath from "@/utils/config";
import { selectAllByParams } from "@/api/seller/cangpushop";
export default {
  created() {},
  data() {
    return {
      dialogVisible: false,
      action: "",
      form: {},
      text: "",
      tableData: [],
      total: null,
    };
  },
  created() {
    this.action = imgPath.imgPath;
    this.showMyAdInfo();
    this.selectAllByParams();
  },
  methods: {
    //获取商品列表
    selectAllByParams() {
      selectAllByParams(this.formInline).then((data) => {
        this.tableData = data.data.records;
        this.total = data.data.total;
      });
    },
    //获取详情
    showMyAdInfo() {
      showMyAdInfo({
        adId: this.$route.query.id,
      }).then((data) => {
        this.form = data.data;
      });
    },
    //保存广告
    advertisementSetProduct(id) {
      let params = {};
      if (this.$route.query.adFlag == 0) {
        params = {
          id: this.$route.query.id,
          imageUrl: this.form.imageUrl,
          text: this.form.text,
        };
      } else {
        params = {
          id: this.$route.query.id,
          productId: id,
        };
      }
      console.log(params);
      advertisementSetProduct(params).then((data) => {
        if (data.code == 200) {
          this.$message({
            message: "保存成功",
            type: "success",
          });
          this.dialogVisible = false;
          this.showMyAdInfo();
        }
      });
    },
    handleAvatarSuccessC(res, file) {
      console.log(res);
      this.form.imageUrl = res.data;
      this.$forceUpdate();
    },
    //图片校验
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 3;
      if (!isLt2M) {
        this.$message.error("上传附件大小不能超过 3MB!");
        return false;
      }
      const isJPEG = file.type === "image/jpeg";
      const isJPG = file.type === "image/jpg";
      const isPNG = file.type === "image/png";
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const isPDF = testmsg === "pdf";
      if (!isJPEG && !isJPG && !isPNG && !isPDF) {
        this.$message.error("上传图片只能是 png,jpg,pdf 格式!");
        return false;
      }
      return true;
    },
  },
};
</script>
    
    <style scoped lang="scss">
.main {
  width: calc(100%);
  min-height: 100%;
  background: #ffffff;
  .rightbottom {
    width: 100%;
    height: 0.84rem;
    display: flex;
    align-items: center;
    .button {
      width: 1.26rem;
      border-radius: 0.1rem;
      height: 0.42rem;
      line-height: 0.42rem;
      text-align: center;
      background: red;
      font-size: 0.14rem;
      color: #ffffff;
      cursor: pointer;
      margin-right: 10px;
    }
    .huise {
      background: #e8e8e8;
    }
  }
  .textBox {
    font-size: 0.18rem;
    margin-bottom: 20px;
  }
  .listBox {
      display: flex;
      flex-wrap: wrap;
      margin-top: 0.2rem;
      .list {
        height: 310px;
        opacity: 1;
        background: #f9f9f9ff;
        margin-right: 20px;

        .newLisat {
          padding: 12px 12px 0;
          margin-bottom: 12px;
        }
        .Position-replacement {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .box-position {
            width: 123px;
            height: 32px;
            opacity: 1;
            background: #ebebebff;
            display: flex;
            justify-content: space-around;
            align-items: center;
            .active {
              opacity: 0.64999998;
              color: rgba(0, 0, 0, 0.45);
            }
            div {
              height: 22px;
              color: rgba(0, 0, 0, 1);
              font-size: 14px;
              font-weight: 400;
              text-align: left;
              line-height: 22px;
              cursor: pointer;
              display: flex;
              align-items: center;
            }
          }
          .box-position2 {
            width: 100px;
            height: 32px;
            opacity: 1;
            background: #ebebebff;
            display: flex;
            justify-content: space-around;
            align-items: center;
            cursor: pointer;
          }
        }
        .imgshop-box {
          width: 200px;
          height: 200px;
          opacity: 1;
          text-align: center;
          margin-bottom: 12px;
          overflow: hidden;
          background: #000;
          img {
            border: 0;
            border-style: none;
            vertical-align: middle;
            width: 100%;
          }
        }
        .SpecificationGood {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          width: 195px;
          height: 22px;
          opacity: 1;
          color: rgba(0, 0, 0, 0.85);
          font-size: 14px;
          font-weight: 400;
          text-align: left;
          line-height: 22px;
        }
        .WareName-goods {
          width: 195px;
          height: 22px;
          opacity: 1;
          color: rgba(0, 0, 0, 0.45);
          font-size: 12px;
          font-weight: 400;
          text-align: left;
          line-height: 22px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .price {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 16px;
          .icon-price {
            width: 8px;
            height: 12px;
            opacity: 1;
            color: #ec5c70;
            font-size: 12px;
            font-weight: 600;
            text-align: left;
            line-height: 12px;
          }
          .RetailPrice {
            height: 22px;
            opacity: 1;
            color: #ec5c70;
            font-size: 16px;
            font-weight: 600;
            font-family: PingFang SC;
            text-align: left;
            line-height: 22px;
          }
        }
        .SalesQuantity-item {
          height: 12px;
          opacity: 1;
          color: rgba(0, 0, 0, 0.45);
          font-size: 12px;
          font-weight: 400;
          text-align: left;
          line-height: 12px;
        }
      }
    }
}
</style>
<style scoped lang="scss">
.newDialog {
  /deep/ .el-divider {
    margin: 0px;
  }
  /deep/ .el-dialog__header {
    padding: 0;
  }
  .textBox {
    font-size: 0.2rem;
    // height: 10vh;
    // display: flex;
    // align-items: center;
    .form {
      .btnBoxB {
        border: 0.01rem solid #e22a1f;
        font-size: 0.16rem;
        color: #e22a1f;
        width: 1rem;
        height: 0.3rem;
        line-height: 0.3rem;
        text-align: center;
        margin-left: 0.1rem;
        cursor: pointer;
      }
      /deep/.el-input__suffix {
        right: 5px;
      }
      /deep/ .el-form-item__content {
        display: flex;
        align-items: center;
      }
      /deep/ .el-cascader {
        width: 100%;
      }
      .bitS {
        display: flex;
      }
      .leftBtn {
        width: 1rem;
        color: #fff;
        height: 0.3rem;
        line-height: 0.3rem;
        background: #e22a1f;
        border-radius: 0.04rem;
        font-size: 0.16rem;
        text-align: center;
        margin-left: 0.2rem;
        cursor: pointer;
      }
      .rightBtn {
        background: #fff;
        color: #e22a1f;
        border: 0.01rem solid #e22a1f;
      }
    }
  }
  .btnBox {
    display: flex;
    justify-content: center;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 10px 0;
    .btnImg {
      width: 14px;
      height: 14px;
      vertical-align: middle;
    }
    /deep/ .el-button {
      padding: 10px 20px;
    }
  }
  .DiaLogHeader {
    display: flex;
    padding: 10px 20px;
    justify-content: space-between;
    .titlebOX {
      font-size: 16px;
      font-weight: 700;
      width: 100%;
      text-align: center;
    }
    .chahao {
      width: 20px;
      height: 20px;
      background-image: url("@/static/Imgs/userImg/chahao.png");
      background-size: 100% 100%;
      text-align: center;
      line-height: 20px;
      // color: #e65f00;
      cursor: pointer;
    }
  }
}
/deep/ .el-dialog__body {
  padding: 0;
  padding-top: 10px;
  padding-bottom: 60px;
}
.tableBox {
  /deep/ .tableHeader {
    background: #ebeff5;
    font-weight: 400;
    color: #000;
  }
  .shopsData {
    display: flex;
    .newImg {
      width: 80px;
      height: 80px;
      border-radius: 10px;
    }
    .shopsDataBox {
      margin-left: 10px;
      .nameBox {
        font-size: 14px;
      }
      .Model {
        color: #999999;
        margin-top: 8px;
        font-size: 12px;
      }
    }
  }
  .lvBox {
    color: #07c160;
  }
  .hongBox {
    color: #e22a1f;
  }
}
</style>